/**
 *  学习目标：Todos 案例
 * *
 *  学习目标：Todos 案例
    需求
      1. ✅拆分组件-拆成函数式组件
      2. ✅渲染列表
      3. ✅根据id更新一条数据的状态
      4. ✅根据id删除一条数据
      5. ✅新增数据-Header改为受控组件改造
      6. ✅新增数据-新增数据到list中
   
      7. 清除已完成 (暂时不讲)
      8. 统计剩余任务(暂时不讲)
      9. ✅点谁谁高亮
      10. 切换数据
      10. ✅切换数据
 */
import React, { useState } from 'react';
import './styles/base.css';
import './styles/index.css';

export default function App() {
  // 2.1 App中声明状态list和初始数据
  const [list, setList] = useState([
    {
      id: 1,
      task: '学习Vue',
      isDone: true,
    },
    {
      id: 2,
      task: '学习React',
      isDone: false,
    },
    {
      id: 3,
      task: '学习ts',
      isDone: false,
    },
  ]);

  // 2.2 通过父传子传递props.list
  const handle = (id) => {
    const newList = list.map((item) => {
      return {
        ...item,
        isDone: item.id === id ? !item.isDone : item.isDone,
      };
    });
    setList(newList);
  };
  const handleDele = (id) => {
    const NewList = list.filter((item) => {
      if (item.id !== id) return id;
    });
    setList(NewList);
  };
  // / 6.1 在App中定义新增方法
  const handleAdd = (task) => {
    const newTask = {
      isDone: false,
      id: Date.now(),
      task,
    };
    setList([...list, newTask]);
  };
  // 声明一个type状态
  const [type, setType] = useState('all');
  // 10.1 定义计算属性showList，🔔 计算属性在函数组件中，写在和return同级
  const showList = list.filter((item) => {
    if (type === 'active') {
      return !item.isDone;
    }
    if (type === 'completed') {
      return item.isDone;
    }
    return item;
  });
  return (
    <section className="todoapp">
      {/* 头部 */}
      <Header handleAdd={handleAdd} />
      {/* 主体 */}
      <Main list={showList} handle={handle} handleDele={handleDele} />
      {/* 底部 */}
      <Footer type={type} setType={setType} />
    </section>
  );
}

function Header({ handleAdd }) {
  const [task, setTask] = useState('');
  const handleKeyDown = (e) => {
    console.log('e.keyCode  ----->  ', e.keyCode);
    if (e.keyCode === 13) {
      handleAdd(task);
      // 4.5 新增后清空输入框的内容
      setTask('');
    }
  };
  return (
    <header className="header">
      <h1>todos</h1>
      <input
        className="new-todo"
        placeholder="需要做什么"
        value={task}
        autoFocus
        onChange={(e) => setTask(e.target.value)}
        onKeyDown={handleKeyDown}
      />
    </header>
  );
}
function Main({ list, handle, handleDele }) {
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => (
          // 2.4 动态class的设置
          <li className={item.isDone ? 'completed' : ''} key={item.id}>
            <div className="view">
              <input
                className="toggle"
                type="checkbox"
                onChange={() => handle(item.id)}
                checked={item.isDone}
              />
              <label>{item.task}</label>
              <button
                className="destroy"
                onClick={() => handleDele(item.id)}
              ></button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}
function Footer({ type, setType }) {
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a
            onClick={() => setType('all')}
            className={type === 'all' ? 'selected' : ''}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() => setType('active')}
            className={type === 'active' ? 'selected' : ''}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() => setType('completed')}
            className={type === 'completed' ? 'selected' : ''}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}
